<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<script src="<c:url value='/resources/js/jquery-1.5.1.min.js'/>" type="text/javascript"></script>
<script src="<c:url value='/resources/js/highcharts.js'/>" type="text/javascript"></script>
<script type="text/javascript">
    //Global variable for chart
    var title = "";
    var jenjangSekolah = "";
    var kecamatans = [];
    var value = [];

    $(document).ready(function() {
        //tampilkan chart
        displayChart();

        /*event ketika selectTahun opsi nya dipilih.
         misal ketika tahun A terpilih, maka secara otomatis select periode hanya akan menampilkan periode
         dari tahun A saja.*/
        $("#selectTahun").change(function() {

            /*ambil idTahun dari selectTahun*/
            var idTahun = $("#selectTahun").attr("value");

            /*buat select periode hanya berisi opsi pilih*/
            $("select#periode").html("<option value=\"\" '>--pilih--</option>");

            /*jika idTahun null atau kosong, abaikan saja proses pencarian, biarkan select periode hanya beropsi pilih*/
            if (idTahun != null && idTahun.length > 0) {

                /*ambil data periode berdasarkan idTahun dengan JSON*/
                $.getJSON("/kab/periode/tahun/" + idTahun + ".json", function(data) {

                    /*buat tag option baru untuk select periode yang berdasarkan idTahun*/
                    var options = "<option value=\"\">--pilih--</option>";
                    for (var i = 0; i < data.length; i++) {
                        var option = "<option value=\"" + data[i].id + "\" label=\"" + data[i].triwulan.triwulan + "\">" + data[i].triwulan.triwulan + "</option>";
                        options = options.concat(option);
                    }

                    /*pasang tag options dari select periode yang baru*/
                    $("select#periode").html(options);
                });
            }
        });
    });

    /**
     * Fungsi menampilkan chart
     */
    function displayChart() {

        if ("${chartTitle}".length > 0) {

            title = "Periode ${chartTitle}";

            /*ambil data untuk ditampilkan chart berdasarkan JenjangSekolah dan periode*/
            $.getJSON("/kab/report/chart/danaBosKecamatan/jenjangSekolah/${chartJenjangSekolah}/periode/${chartPeriode.id}.json", function(data) {
                jenjangSekolah.concat(data.danaBosJenjangSekolah + "");

                for (var i = 0; i < data.datasource.length; i++) {
                    kecamatans[i] = data.datasource[i].namaKecamatan;
                    value[i] = data.datasource[i].dana;
                }

                 chart1 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'chart',
                        defaultSeriesType: 'column'
                    },
                    title: {
                        text: 'Dana BOS Kecamatan ' + title
                    },
                    xAxis: {
                        categories: kecamatans
                    },
                    yAxis: {
                        title: {
                            text: 'Dana BOS'
                        }
                    },
                    series: [
                        {
                            name: 'Dana',
                            data: value
                        }
                    ]
                });
            });

        }
/*
        alert(kecamatans);
        alert(value);*/


    }
</script>

<div class="content">

    <%--Chart disini--%>
    <div id="chart" style="width: 100%; height: 300px"></div>

    <c:url value="/report/chart/danaBosKecamatan/new" var="chart_url"/>
    <form:form action="${chart_url}" method="POST" modelAttribute="danaBosKecamatanRequest">
        <div class="blocksection">
            <div class="blockcontent">
                <h3>Masukkan Data Untuk Melihat Laporan BOS 02</h3>
                <dl class="form-text">
                    <dt>
                        <label for="jenjangSekolah">Jenjang Sekolah :</label>
                    </dt>
                    <dd>
                        <form:select path="jenjangSekolah" id="jenjangSekolah">
                            <form:option label="--pilih--" value=""/>
                            <c:forEach items="${jenjangSekolahList}" var="jenjangSekolahItem">
                                <form:option value="${jenjangSekolahItem}" label="${jenjangSekolahItem}"/>
                            </c:forEach>
                        </form:select>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="jenjangSekolah"/>
                    </dd>

                    <dt><label>Tahun :</label></dt>
                    <dd>
                        <select id="selectTahun">
                            <option value="" selected="selected">--pilih--</option>
                            <c:forEach items="${tahunList}" var="tahunItem">
                                <option value="${tahunItem.id}">${tahunItem.tahun}</option>
                            </c:forEach>
                        </select>
                    </dd>

                    <dt>
                        <label for="periode">Periode : </label>
                    </dt>
                    <dd>
                        <form:select path="periode" id="periode">
                            <form:option label="--pilih--" value=""/>
                            <form:options items="${periodeList}" itemValue="id" itemLabel="triwulan.triwulan"/>
                        </form:select>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="periode"/>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="form-button">
            <input type="submit" value="Lihat" name="submit_1" id="submit_1"/>
            <input class="grey" type="reset" value="Hapus" name="reset_1" id="reset_1"/>
        </div>
    </form:form>
</div>